<template>
	<div class='task-model'>
		<el-form :model="newForm" :rules="rulesForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-row :gutter="20">
				<el-col :span="20">
					<el-form-item label="检测客户" prop="client">
						<el-select filterable v-model="newForm.client" @change="clientSelect" style="width:calc(60% - 80px);" placeholder="请选择" size="mini">
							<el-option v-for="item in inspectionUnitTableDate2" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="20">
					<el-form-item label="任务模板" prop="modelId">
						<el-select filterable v-model="newForm.modelId" style="width:calc(60% - 80px);" @change="modelChange" placeholder="请选择" size="mini">
							<el-option v-for="item in modelArr" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row style="text-align: center;" class="commonFooter">
				<el-button @click="changeStep('newWay')" size="mini">上一步</el-button>
				<el-button type="primary" @click="get2TaskDetail" size="mini">下一步</el-button>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'task-model',
		data() {
			return {
				newForm: {
					client: "",
					modelId: ""
				},
				rulesForm: {
					client: [{ required: true, message: '请选择客户', trigger: 'change' },],
					modelId: [{ required: true, message: '请选择模板', trigger: 'change' }]
				},

				modelArr: [],
			}
		},
		computed: {
			...mapState(['inspectionUnitTableDate2'])
		},
		methods: {
			changeStep(tabName) {
				if(tabName == 'newWay'){
					this.$refs.ruleForm.resetFields();
				}
				this.$parent.$parent.changeTab(tabName)
			},
			clientSelect(val) {

				this.$http({
					method: 'post',
					apiUrl: '/detection/getPlanByCondition.htm',
					params: { client: val },
					isJson: true,
				}).then(res => {
					if (res.code === 0) {

						this.modelArr = res.data
					}
				}, )


			},
			modelChange(val) {
				console.log(val)

			},
			getPlan(id) {
				return new Promise((resolve, reject) => {
					this.$http({
						method: 'post',
						apiUrl: '/detection/getPlan.htm',
						params: { id: id },
						isJson: false,
					}).then(res => {
						if (res.code === 0) {
							resolve(res)
						}
					}, )
				})
			},
			get2TaskDetail() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						this.getPlan(this.newForm.modelId).then(res => {

							this.$parent.$parent.close()
							this.$parent.$parent.$parent.showButton = {
								saveButton: true,
								submitButton: true,
								auditButton: false
							}
							this.$parent.$parent.$parent.thisNewTaskData.newTaskBasic = res.data
							this.$parent.$parent.$parent.callTaskDetail('模板任务', [0, 1])
						})
					}
				})

			}
		}
	}

</script>

<style lang="scss">
	.task-model {
		.el-row {
			margin-bottom: 10px;
		}
	}
</style>